<template>
    <div class="news" v-wechat-title="$route.meta.title">
        <div class="banner">
            <div class="shadow">
                <span class="tit">新闻资讯</span>
                <span class="dec">小二哥科技官方发布的最新动态或消息，为您提供关于相关行业的第一手资讯。</span>
            </div>
        </div>
        <div class="floor">
            <swiper class="swiper_wrap" :options="swiperOptions">
                <swiper-slide v-for="(item, index) in newsList" :key="index">
                    <div class="card">
                        <img :src="item.cover" alt="">
                        <div class="con">
                            <span class="date">{{item.time}}</span>
                            <span class="tit">{{item.title}}</span>
                            <span class="dec">{{item.dec}}</span>
                            <router-link :to="`/news/${item.id}`">查看详情</router-link>
                        </div>
                    </div>
                </swiper-slide>

                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>

            <swiper class="swiper_wrap page" :options="swiperOptions">
                <swiper-slide v-for="(item, index) in newsPage" :key="index">
                    <div class="card" v-for="(e, i) in item" :key="i">
                        <span class="date">{{e.time}}</span>
                        <span class="tit">{{e.title}}</span>
                        <span class="dec">{{e.dec}}</span>
                        <router-link :to="`/news/${e.id}`">查看详情</router-link>
                    </div>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>

        </div>
    </div>
</template>

<script>
import { newsList } from './news/data'
import _ from 'lodash'

export default {
    name: 'News',
    data(){
        return {
            newsList,
            swiperOptions: {
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                }
            },
        }
    },
    computed: {
        // 分组
        newsPage(){
            return _.chunk(newsList, 6);
        }
    },
    created(){
        // console.log(this.newsList)
    }
}
</script>

<style lang="less" scoped>
.news {
    width: 1920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .banner {
        width: 100%;
        height: 500px;
        background: url('../assets/image/news/banner.png');
        background-size: 100% 100%;
        position: relative;

        .shadow {
            position: absolute;
            bottom: 0;
            left: 129px;
            width: 755px;
            height: 362px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 30px 30px 0px 0px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            letter-spacing: 2px;
            color: #FFFFFF;

            .tit {
                font-size: 40px;
                margin: 65px 0 0 61px;
            }

            .dec {
                font-size: 24px;
                margin: 0 20px 136px 61px;
                line-height: 30px;
                font-weight: 300;
            }

            .tel {
                font-size: 30px;
                margin: 0 0 65px 61px;
            }
        }
    }

    .floor {
        width: calc(100% - 240px * 2);
        padding: 120px 240px 136px 240px;
        background: #F5F5F5;

        /deep/.swiper_wrap {
            margin: 0 auto;
            height: calc(444px + 40px + 10px);
            width: 100%;
            background: transparent;
            margin-bottom: 148px;

            .swiper-slide {
                height: 444px;
                background: white;

                .card {
                    height: 100%;
                    display: flex;
                    align-items: center;

                    img {
                        margin: 40px;
                        background: turquoise;
                        width: 557px;
                        height: calc(100% - 40px * 2);
                    }

                    .con {
                        margin: 40px;
                        margin-left: 20px;
                        height: calc(100% - 40px * 2);
                        flex: 1;
                        display: flex;
                        flex-direction: column;

                        span {
                            display: block;
                        }

                        .date {
                            font-size: 16px;
                            line-height: 16px;
                            color: #000000;
                            margin-bottom: 32px;
                            margin-top: 12px;
                        }

                        .tit {
                            font-size: 30px;
                            line-height: 30px;
                            color: #FFCF00;
                            margin-bottom: 24px;
                        }

                        .dec {
                            font-size: 22px;
                            line-height: 33px;
                            color: #666666;
                        }

                        a {
                            width: 104px;
                            height: 36px;
                            border: 1px solid #999999;
                            box-sizing: border-box;
                            border-radius: 44px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            text-decoration: none;
                            color: #999999;
                            font-size: 16px;
                            align-self: flex-start;
                            margin-top: auto;
                            margin-bottom: 32px;
                        }
                    }
                }
            }

            .swiper-pagination-bullet {
                width: 10px;
                height: 10px;
                border-radius: 11px;
                background: #C4C4C4;
                margin: 0 12px;
                transition: width .3s;
            }

            .swiper-pagination-bullet-active {
                width: 21px;
                height: 10px;
                background: #FFCF00;
                border-radius: 11px;
            }

            &.page {
                height: calc(1314px + 40px + 10px);
                margin-bottom: 0;

                .swiper-slide {
                    height: 1314px;
                    background: transparent;

                    .card {
                        width: 412px;
                        height: 607px;
                        background: #FFFFFF;
                        box-shadow: 0px 8px 8px rgba(159, 159, 159, 0.25);
                        float: left;
                        margin-bottom: 100px;
                        margin-right: 100px;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: flex-start;

                        &:nth-child(3n) {
                            margin-right: 0;
                        }

                        span {
                            display: block;
                        }

                        .date {
                            font-size: 30px;
                            color: #FFCF00;
                            margin: 40px 25px 24px 25px;
                        }

                        .tit {
                            font-size: 22px;
                            line-height: 33px;
                            color: #666666;
                            margin: 0 25px auto 25px;
                        }

                        .dec {
                            font-size: 16px;
                            line-height: 24px;
                            color: #666666;
                            margin: auto 25px 30px 25px;
                        }

                        a {
                            width: 88px;
                            height: 34px;
                            border: 1px solid #999999;
                            box-sizing: border-box;
                            border-radius: 44px;
                            text-decoration: none;
                            font-size: 14px;
                            line-height: 14px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #999999;
                            margin: 0 25px 25px auto;
                        }
                    }
                }
            }
        }

        // 指示器位置
        .swiper-pagination-fraction,
        .swiper-pagination-custom,
        .swiper-container-horizontal>.swiper-pagination-bullets {
            bottom: 0px;
        }
    }

}</style>